<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./static/icon/iconfont.css">
    <style>
        body {
            min-height: 100vh;
            background-color: #abefe9;
        }

        body>div {
            margin: 5px;
            border: #bfa 3px solid;
            background-color: #FFCCCC;
        }

        hr {
            background-color: red;
            height: 1px;
            border: 0;
        }

        li {

            list-style: none;
            font-size: 20px;
        }

        li::before {
            font-family: "iconfont";
        }

        li:nth-last-of-type(1)::before {
            content: "\e704";
        }

        li:nth-last-of-type(2)::before {
            content: "\e6fa";
        }

        li:nth-last-of-type(3)::before {
            content: "\e6f9";
        }
    </style>
</head>

<body>
    <!-- 阿里巴巴矢量图标库
        将选择的图标添加项目
        本地使用：下载后，加入项目文件，link链入
        网络使用：在项目中生成代码，通过link链入
    -->
    <i class="iconfont icon-agriculture" style="font-size: 100px;color: #f66;"></i>
    <i class="iconfont icon-favorites-fill" style="font-size: 100px;color: #f03;"></i>
    <!-- 
    fontawesome(外网图标库)
        下载文件
        将css、webfonts两个文件夹移动到项目中，
            link链入，href=".路径/css/all.css"
        图标使用方法如上，其中iconfont改为[fas/fab]
     -->

    <hr>
    <!-- 通过伪元素实现 -->
    <ul>
        <li>设置自定义图标</li>
        <li>设置自定义图标</li>
        <li>设置自定义图标</li>
    </ul>
    <hr>
    <!-- 通过实体实现 -->
    <span class="iconfont" style="font-size:50px;">&#xe6f3;</span>
</body>

</html>